<template>
  <div class="container">
    <!-- indent为维保或巡检时可见 -->
    <div v-if="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div class="card" v-if="indent != '知识库'" v-for="item in list" @click="myDetails(item)">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.repairMaintainNo ?? item.inspectNo }}
        </div>
        <div v-show="indent == '维保'" style="width: 20%; text-align: center;border-radius: 4px;">
          <image style="width: 110rpx;height: 60rpx;"
            :src="item.repairMaintainOrderState === 0 ? 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png' : 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png'" />
        </div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="gray"></u-line>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>发单日期</div>
        <div>{{ item.launchTime ?? item.createTime }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="newFlex">
        <div>接单人员</div>
        <div>{{ item.userName ?? item.orderPersonName }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="newFlex">
        <div>手机号码</div>
        <div>{{ item.phonenumber ?? item.phoneNumber }}</div>
      </div>
      <div v-show="indent == '维保'" style="height: 15px;"></div>
      <div class="newFlex" v-show="indent == '维保'">
        <div>设备编号</div>
        <div>{{ item.repairMaintainNo }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="newFlex" v-show="indent == '巡检'">
        <div>巡检对象</div>
        <div>{{ item.inspectName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div @click="acceptTask(item)" v-show="indent == '维保'"
        :class="item.repairMaintainState == 0 ? 'status' : 'status1'">
        {{ item.repairMaintainState == 0 ? "待接单" :
          item.repairMaintainState == 1 ? '进行中' : item.repairMaintainState == 2 ? '已完成' : '无' }}
      </div>
      <div @click="acceptXunjian(item)" v-show="indent == '巡检'"
        :class="item.workOrderState == 1 ? 'status' : 'status1'">
        {{ item.workOrderState == 1 ? "待接单" : item.workOrderState == 2 ? '进行中' : item.workOrderState == 3 ? '已完成' : ''
        }}
      </div>
      <div style="height: 15px"></div>
    </div>
    <!-- indent为知识库时可见 -->
    <div v-if="indent == '知识库'" class="card" v-for="item in list">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style="text-align: center;font-size: 18px;font-weight: 500;">{{ item.safetyTrainNo }}</div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <!-- <div class="items">
        <div>试卷：{{ item.paperName }}</div>
        <div>合格分数：{{ item.scoreLine }}</div>
      </div> -->
      <div class="items">
        <div>试卷名称</div>
        <div>{{ item.paperName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>合格分数</div>
        <div>{{ item.scoreLine }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>开始时间</div>
        <div>{{ item.startTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>结束时间</div>
        <div>{{ item.endTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="status" @click="startKS(item)">
        立即考试
      </div>
      <div style="height: 15px"></div>
    </div>
    <div style="height: 30rpx;"></div>
    <div style="height: 3vh;"></div>
  </div>
</template>
<script>
import { mainList, insList, getNotExam, acceptWb, acceptXj } from '../api/api.js';
export default {
  data() {
    return {
      startTime: '2023.09.09',
      endTime: '2023.09.09',
      list: [],
      indent: '',
    };
  },
  methods: {
    //接受维保
    acceptTask(i) {
      let t = this;
      if (i.repairMaintainState === 0) {
        uni.showModal({
          title: '提示',
          content: '确认接受当前任务吗',
          success: function (res) {
            if (res.confirm) {
              acceptWb(i.id).then(res => {
                console.log(res.data, 'res.data');
                if (res.data.code == 200) {
                  uni.showToast({
                    title: res.data.msg,
                    duration: 2000,
                    icon: 'none'
                  });
                  setTimeout(() => {
                    uni.navigateBack({ delta: 1 })
                  }, 1000)
                }
              })
            } else if (res.cancel) {
              uni.showToast({
                title: '取消',
                duration: 2000,
                icon: 'none'
              });
            }
          }
        });
      }


    },
    //接受巡检
    acceptXunjian(i) {
      let t = this;
      if(i.workOrderState == 1){
        uni.showModal({
        title: '提示',
        content: '确认接受当前任务吗',
        success: function (res) {
          if (res.confirm) {
            acceptXj(i.id).then(res => {
              console.log(res.data, 'res.data');
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000,
                  icon: 'none'
                });
                setTimeout(() => {
                  uni.navigateBack({ delta: 1 })
                }, 1000)
              }
            })
          } else if (res.cancel) {
            uni.showToast({
              title: '取消',
              duration: 2000,
              icon: 'none'
            });
          }
        }
      });
      }
      

    },
    startKS(i) {
      uni.setStorageSync('doneId', i.id);
      uni.navigateTo({
        url: `/pagesPlant/index/start?id=${i.paperId}`
      })
    },
    myDetails(i) {
      // console.log(i, 'i');

      // uni.navigateTo({
      //   url: `/pagesPlant/index/myDetails?id=${i.id}`
      // })
    },
    wList() {
      mainList({
        repairMaintainState: '',
        beginTime: '',
        endTime: '',
        type: 2
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.rows, 'res');
          // 使用 map 方法进行数据转换
          this.list = res.data.rows.map(item => ({
            id: item.repairMaintainTask.id,
            phonenumber: item.phonenumber,
            userName: item.repairMaintainTask.userName,
            launchTime: item.repairMaintainTask.launchTime,
            repairMaintainNo: item.repairMaintainTask.repairMaintainNo,
            repairMaintainOrderState: item.repairMaintainTask.repairMaintainOrderState,
            repairMaintainState: item.repairMaintainTask.repairMaintainState,
            repairMaintainType: item.repairMaintainTask.repairMaintainType,
            deptName: item.repairMaintainTask.deptName,
            deptId: item.repairMaintainTask.deptId,
            deviceNo: item.repairMaintainTask.deviceNo,
            taskDesc: item.repairMaintainTask.taskDesc,
            deviceSate: item.repairMaintainTask.deviceSate,
            // faultType:item.repairMaintainTask.faultType,
            faultType: item.repairMaintainTask.faultType,
            emerDegree: item.repairMaintainTask.emerDegree,
            deviceName: item.repairMaintainTask.deviceName,
          })).filter((item)=>item.repairMaintainState!=2);
        }
      })
    },
    xList() {
      insList({
        workOrderState: '',
        beginTime: '',
        endTime: '',
        type: 2
      }).then(res => {
        console.log(res.data, '巡检工单');
        this.list = res.data.data.filter((item)=>item.workOrderState != 3);
      })
    },
    zList() {
      getNotExam().then(res => {
        console.log(res.data, '我的待参加考试');
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      })
    }
  },
  onLoad() { },
  onShow() {
    this.indent = uni.getStorageSync('flag_key');
    if (this.indent == '知识库') {
      uni.setNavigationBarTitle({
        title: '等待考试'
      });
      this.zList();
    } else if (this.indent == '巡检') {
      this.xList()
      uni.setNavigationBarTitle({
        title: '我的待处理'
      });
    } else if (this.indent == '维保') {
      this.wList();
      uni.setNavigationBarTitle({
        title: '我的待处理'
      });
    }
  }
};
</script>
<style lang="scss">
.newFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.status1 {
  color: #1a512c;
  background: #91c5a3;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #1A512C;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  background: #1B9C46;
  color: #fff;
  border-radius: 7px;
  height: 60rpx;
  justify-content: center;
  position: absolute;
  width: 100px;
  z-index: 9999;
  bottom: 10%;
  right: 10px;
}

.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
</style>